<template>
  <div class="wrapper">
    <div class="wrapper__input">
      <input
        class="wrapper__input__content"
        placeholder="用户名"
        v-model="data.username"
      />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="请输入密码"
        v-model="data.password"
      />
    </div>
    <!-- <div class="wrapper__login-button" @click="handleLogin">登陆</div> -->
    <a-button @click="handleLogin">登陆</a-button>
    <!-- <div class="wrapper__login-link" @click="handleRegisterClick">立即注册</div> -->
    <Toast v-if="toastData.showToast" :message="toastData.toastMessage" />
    <!-- 2、页面中调用 -->
  </div>
</template>

<script>
import { reactive } from 'vue';
// import { useRouter } from 'vue-router';
import Toast, { useToastEffect } from './Toast'; // 1、在需要的页面引用

export default {
  name: 'Login',
  components: { Toast },
  setup() {
    // const router = useRouter();
    const data = reactive({ username: '', password: '' });
    const { toastData, showToast } = useToastEffect(); // 3、
    const handleLogin = async () => {
      try {
        let num = Math.random() * 10;
        if (num > 3) {
          showToast('登录成功'); // 4、调用showToast组件
        } else {
          showToast('登录失败'); // 4、调用showToast组件
        }
      } catch (e) {
        showToast('请求失败'); // // 5、调用showToast组件
      }
    };
    // const handleRegisterClick = () => {
    //   router.push({ name: 'Register' });
    // };
    return { handleLogin, data, toastData }; // 6、返回toastData
  },
};
</script>

<style lang="less" scoped>
.wrapper {
}
</style>
